import React, {RefObject} from "react";
import {Button as AntdButton, Tabs as AntdTabs} from 'antd';
import {renderItems, render, VJsonComponent, VJsonComponentBase} from "../factory";
import _ from 'lodash';
import {YvanEvent} from "../types";
import {TabsType, TabsPosition, TabPaneProps, TabsProps} from "antd/lib/tabs";
import {apply, YvanEventBind, YvanEventDispatch} from "..";
import {SizeType} from "antd/lib/config-provider/SizeContext";
import * as Extend from "../extend";
import {FormInstance} from "antd/lib/form/hooks/useForm";
import {toJS} from "mobx";

const {TabPane: AntdTabPane} = AntdTabs;

export interface TabsVJsonProp {
    addIcon?: React.ReactNode
    animated?: boolean
    renderTabBar?: any
    defaultActiveKey?: string
    hideAdd?: boolean
    size?: SizeType
    centered?: boolean
    tabBarExtraContent?: React.ReactNode
    tabBarGutter?: number
    tabBarStyle?: object
    tabPosition?: TabsPosition
    type?: TabsType
    // onChange?: YvanEvent<Tabs>
    // onEdit?: YvanEvent<Tabs>
    onTabClick?: YvanEvent<Tabs>
    onTabScroll?: YvanEvent<Tabs>
    keyboard?: boolean

    visible?: boolean
    items: any[]
}

interface TabsState {

}

@VJsonComponent({
    view: 'tabs'
})
export default class Tabs extends VJsonComponentBase<TabsVJsonProp, TabsState> {
    static defaultProps = {
        hideAdd: true,
        size: 'default',
        centered: false,
        tabPosition: "top",
        type: 'line',

        visible: true,
        items: [],
    }

    defaultActiveKey?: string
    private _activeKey?: string

    constructor(props: any) {
        super(props);

        _.defaults(
            props.vjson,
            Tabs.defaultProps
        )
    }

    componentWillMount() {
        super.componentWillMount();

        _.forEach(this.props.vjson.items, item => {
            if (!item.key) {
                item.key = _.uniqueId("_")
            }
        })

        let index = this.props.vjson.defaultTabIndex
        if (typeof index !== 'undefined') {
            const item = this.props.vjson.items[index]
            if (item) {
                this.defaultActiveKey = item.key
                this._activeKey = this.defaultActiveKey
            }
        } else {
            const item = this.props.vjson.items[0]
            if (item) {
                this.defaultActiveKey = item.key
                this._activeKey = this.defaultActiveKey
            }
        }
    }

    get activeKey() {
        return this._activeKey
    }

    setTabTitle(key: string, title: string) {
        _.forEach(this.props.vjson.items, (item) => {
            if (key === item.key) {
                item.title = title
                return false
            }
        })
    }

    onTabClick(tabKey: string) {
        this._activeKey = tabKey
        YvanEventDispatch(this.props.vjson.onTabClick, this, tabKey)
    }

    render() {
        if (Extend.isDebugMode()) {
            console.log('RenderTabs ', this.toString())
        }

        if (!this.props.vjson.visible) {
            return null
        }
        return (
            // @ts-ignore
            <AntdTabs key={this.key} view_id={this.key} aria-roledescription={this.view}
                      addIcon={apply(this, this.props.vjson.addIcon)}
                //activeKey={apply(this, this.state.activeKey)}
                      style={apply(this, toJS(this.props.vjson.style))}
                      className={apply(this, toJS(this.props.vjson.className))}
                // @ts-ignore
                      animated={apply(this, this.props.vjson.animated)}
                      defaultActiveKey={this.defaultActiveKey}
                      hideAdd={apply(this, this.props.vjson.hideAdd)}
                      size={apply(this, this.props.vjson.size)}
                      centered={apply(this, this.props.vjson.centered)}
                      tabBarExtraContent={apply(this, this.props.vjson.tabBarExtraContent)}
                      tabBarGutter={apply(this, toJS(this.props.vjson.tabBarGutter))}
                      tabBarStyle={apply(this, toJS(this.props.vjson.tabBarStyle))}
                      tabPosition={apply(this, this.props.vjson.tabPosition)}
                      type={apply(this, this.props.vjson.type)}
                // onChange={(e) => {
                //     this.setState({
                //         activeKey: e
                //     }, () => {
                //         YvanEventDispatch(this.props.vjson.onChange, this, e)
                //     })
                // }}
                // onEdit={YvanEventBind(this.props.vjson.onEdit, this)}
                      onTabClick={this.onTabClick.bind(this)}
                      onTabScroll={YvanEventBind(this.props.vjson.onTabScroll, this)}
            >
                {
                    _.map(this.props.vjson.items, (item: any) => {
                        const forceRender = !!item.forceRender
                        return (
                            <AntdTabPane forceRender={forceRender} tab={apply(this, item.title)} key={item.key}>
                                {
                                    render(this, item.content)
                                }
                            </AntdTabPane>
                        )
                    })
                }
            </AntdTabs>
        )
    }
}